<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>支付设置</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
        }
    </style>
</head>
<body class="bg-gray-100">
    <div class="mx-auto max-w-[393px] h-[852px] bg-white relative overflow-hidden rounded-[40px] shadow-2xl">
        <!-- Status Bar -->
        <div class="bg-white px-6 pt-3 pb-2">
            <div class="flex justify-between items-center text-xs">
                <span class="font-semibold">9:41</span>
                <div class="flex space-x-1">
                    <i class="fas fa-signal"></i>
                    <i class="fas fa-wifi"></i>
                    <i class="fas fa-battery-full"></i>
                </div>
            </div>
        </div>

        <!-- Header -->
        <div class="bg-gradient-to-r from-green-600 to-teal-600 px-4 py-3">
            <div class="flex items-center justify-between text-white">
                <a href="b2b-profile.html" class="text-white">
                    <i class="fas fa-arrow-left text-lg"></i>
                </a>
                <h1 class="text-lg font-semibold">支付设置</h1>
                <button onclick="viewPaymentReport()" class="text-white hover:opacity-80">
                    <i class="fas fa-chart-line text-lg"></i>
                </button>
            </div>
        </div>

        <!-- Payment Status Card -->
        <div class="px-4 py-3 bg-gradient-to-r from-green-600 to-teal-600">
            <div class="bg-white/10 backdrop-blur-sm rounded-xl p-4">
                <div class="flex items-center text-white">
                    <div class="w-12 h-12 bg-white/20 rounded-full flex items-center justify-center mr-3">
                        <i class="fas fa-credit-card text-xl"></i>
                    </div>
                    <div class="flex-1">
                        <h3 class="font-bold text-lg">支付服务</h3>
                        <div class="flex items-center mt-1">
                            <span class="w-2 h-2 bg-green-400 rounded-full mr-2 animate-pulse"></span>
                            <span class="text-sm opacity-90">运行正常</span>
                        </div>
                    </div>
                    <div class="text-right">
                        <p class="text-xs opacity-80">今日交易</p>
                        <p class="text-lg font-semibold">¥28.6万</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Scrollable Content -->
        <div class="h-[calc(852px-220px)] overflow-y-auto pb-20">
            <!-- Payment Methods -->
            <div class="p-4">
                <h3 class="font-semibold mb-3 flex items-center">
                    <span class="w-1 h-4 bg-green-600 mr-2 rounded-full"></span>
                    支付方式
                </h3>
                <div class="space-y-3">
                    <!-- Alipay -->
                    <div class="bg-white rounded-xl border border-gray-200 overflow-hidden">
                        <div class="bg-gradient-to-r from-blue-500 to-blue-600 p-3 text-white">
                            <div class="flex justify-between items-center">
                                <div class="flex items-center">
                                    <i class="fab fa-alipay text-xl mr-2"></i>
                                    <div>
                                        <p class="font-medium">支付宝</p>
                                        <p class="text-xs opacity-80 mt-1">扫码支付、APP支付</p>
                                    </div>
                                </div>
                                <label class="relative inline-flex items-center cursor-pointer">
                                    <input type="checkbox" checked class="sr-only peer">
                                    <div class="w-9 h-5 bg-white/30 rounded-full peer peer-checked:bg-white peer-checked:after:translate-x-full after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-blue-600 after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:after:bg-blue-600"></div>
                                </label>
                            </div>
                        </div>
                        <div class="p-3">
                            <div class="grid grid-cols-2 gap-3 text-xs mb-3">
                                <div>
                                    <p class="text-gray-500">手续费率</p>
                                    <p class="font-medium text-blue-600">0.6%</p>
                                </div>
                                <div>
                                    <p class="text-gray-500">结算周期</p>
                                    <p class="font-medium">T+1</p>
                                </div>
                            </div>
                            <button onclick="configurePayment('alipay')" class="w-full bg-blue-50 text-blue-600 text-xs py-2 rounded-lg hover:bg-blue-100 transition-colors">
                                配置参数
                            </button>
                        </div>
                    </div>

                    <!-- WeChat Pay -->
                    <div class="bg-white rounded-xl border border-gray-200 overflow-hidden">
                        <div class="bg-gradient-to-r from-green-500 to-green-600 p-3 text-white">
                            <div class="flex justify-between items-center">
                                <div class="flex items-center">
                                    <i class="fab fa-weixin text-xl mr-2"></i>
                                    <div>
                                        <p class="font-medium">微信支付</p>
                                        <p class="text-xs opacity-80 mt-1">扫码支付、公众号支付</p>
                                    </div>
                                </div>
                                <label class="relative inline-flex items-center cursor-pointer">
                                    <input type="checkbox" checked class="sr-only peer">
                                    <div class="w-9 h-5 bg-white/30 rounded-full peer peer-checked:bg-white peer-checked:after:translate-x-full after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-green-600 after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:after:bg-green-600"></div>
                                </label>
                            </div>
                        </div>
                        <div class="p-3">
                            <div class="grid grid-cols-2 gap-3 text-xs mb-3">
                                <div>
                                    <p class="text-gray-500">手续费率</p>
                                    <p class="font-medium text-green-600">0.6%</p>
                                </div>
                                <div>
                                    <p class="text-gray-500">结算周期</p>
                                    <p class="font-medium">T+1</p>
                                </div>
                            </div>
                            <button onclick="configurePayment('wechat')" class="w-full bg-green-50 text-green-600 text-xs py-2 rounded-lg hover:bg-green-100 transition-colors">
                                配置参数
                            </button>
                        </div>
                    </div>

                    <!-- Bank Transfer -->
                    <div class="bg-white rounded-xl border border-gray-200 overflow-hidden">
                        <div class="bg-gradient-to-r from-indigo-500 to-purple-600 p-3 text-white">
                            <div class="flex justify-between items-center">
                                <div class="flex items-center">
                                    <i class="fas fa-university text-xl mr-2"></i>
                                    <div>
                                        <p class="font-medium">银行转账</p>
                                        <p class="text-xs opacity-80 mt-1">对公转账</p>
                                    </div>
                                </div>
                                <label class="relative inline-flex items-center cursor-pointer">
                                    <input type="checkbox" class="sr-only peer">
                                    <div class="w-9 h-5 bg-white/30 rounded-full peer peer-checked:bg-white peer-checked:after:translate-x-full after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-indigo-600 after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:after:bg-indigo-600"></div>
                                </label>
                            </div>
                        </div>
                        <div class="p-3">
                            <div class="grid grid-cols-2 gap-3 text-xs mb-3">
                                <div>
                                    <p class="text-gray-500">手续费率</p>
                                    <p class="font-medium text-indigo-600">0%</p>
                                </div>
                                <div>
                                    <p class="text-gray-500">到账时间</p>
                                    <p class="font-medium">1-3工作日</p>
                                </div>
                            </div>
                            <button onclick="configurePayment('bank')" class="w-full bg-indigo-50 text-indigo-600 text-xs py-2 rounded-lg hover:bg-indigo-100 transition-colors">
                                配置参数
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Fee Settings -->
            <div class="p-4">
                <h3 class="font-semibold mb-3 flex items-center">
                    <span class="w-1 h-4 bg-green-600 mr-2 rounded-full"></span>
                    费率设置
                </h3>
                <div class="bg-white rounded-lg border border-gray-200 p-4">
                    <div class="space-y-4">
                        <div class="flex justify-between items-center">
                            <span class="text-sm text-gray-600">基础费率</span>
                            <span class="text-sm font-medium">0.60%</span>
                        </div>
                        <div class="flex justify-between items-center">
                            <span class="text-sm text-gray-600">VIP费率折扣</span>
                            <span class="text-sm font-medium text-green-600">-0.05%</span>
                        </div>
                        <div class="flex justify-between items-center">
                            <span class="text-sm text-gray-600">实际费率</span>
                            <span class="text-lg font-bold text-blue-600">0.55%</span>
                        </div>
                        <div class="border-t pt-3">
                            <p class="text-xs text-gray-500 mb-2">月交易量达标可享受更多费率优惠</p>
                            <button onclick="viewFeeDetails()" class="w-full bg-blue-50 text-blue-600 text-sm py-2 rounded-lg hover:bg-blue-100 transition-colors">
                                查看费率详情
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Risk Control -->
            <div class="p-4">
                <h3 class="font-semibold mb-3 flex items-center">
                    <span class="w-1 h-4 bg-green-600 mr-2 rounded-full"></span>
                    风控设置
                </h3>
                <div class="space-y-3">
                    <div class="bg-white rounded-lg border border-gray-200 p-3">
                        <div class="flex justify-between items-center">
                            <div>
                                <p class="text-sm font-medium">单笔限额</p>
                                <p class="text-xs text-gray-500 mt-1">单次支付最高金额</p>
                            </div>
                            <div class="text-right">
                                <p class="text-sm font-medium">¥50,000</p>
                                <button onclick="editSingleLimit()" class="text-blue-600 text-xs hover:text-blue-700">修改</button>
                            </div>
                        </div>
                    </div>

                    <div class="bg-white rounded-lg border border-gray-200 p-3">
                        <div class="flex justify-between items-center">
                            <div>
                                <p class="text-sm font-medium">日累计限额</p>
                                <p class="text-xs text-gray-500 mt-1">每日总支付限额</p>
                            </div>
                            <div class="text-right">
                                <p class="text-sm font-medium">¥200,000</p>
                                <button onclick="editDailyLimit()" class="text-blue-600 text-xs hover:text-blue-700">修改</button>
                            </div>
                        </div>
                    </div>

                    <div class="bg-white rounded-lg border border-gray-200 p-3">
                        <div class="flex justify-between items-center">
                            <div>
                                <p class="text-sm font-medium">异常交易监控</p>
                                <p class="text-xs text-gray-500 mt-1">自动检测可疑交易</p>
                            </div>
                            <label class="relative inline-flex items-center cursor-pointer">
                                <input type="checkbox" checked class="sr-only peer">
                                <div class="w-9 h-5 bg-gray-200 rounded-full peer peer-checked:bg-green-500 peer-checked:after:translate-x-full after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-4 after:w-4 after:transition-all"></div>
                            </label>
                        </div>
                    </div>

                    <div class="bg-white rounded-lg border border-gray-200 p-3">
                        <div class="flex justify-between items-center">
                            <div>
                                <p class="text-sm font-medium">自动退款</p>
                                <p class="text-xs text-gray-500 mt-1">符合条件的订单自动退款</p>
                            </div>
                            <label class="relative inline-flex items-center cursor-pointer">
                                <input type="checkbox" class="sr-only peer">
                                <div class="w-9 h-5 bg-gray-200 rounded-full peer peer-checked:bg-green-500 peer-checked:after:translate-x-full after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-4 after:w-4 after:transition-all"></div>
                            </label>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Settlement Settings -->
            <div class="p-4 pb-8">
                <h3 class="font-semibold mb-3 flex items-center">
                    <span class="w-1 h-4 bg-green-600 mr-2 rounded-full"></span>
                    结算设置
                </h3>
                <div class="bg-gradient-to-br from-green-50 to-teal-50 rounded-xl p-4 border border-green-200">
                    <div class="flex items-center justify-between mb-3">
                        <div>
                            <p class="font-semibold text-green-800">自动结算</p>
                            <p class="text-xs text-green-700 mt-1">每日自动结算到指定银行账户</p>
                        </div>
                        <span class="bg-green-100 text-green-600 text-xs px-2 py-1 rounded-full">已开启</span>
                    </div>
                    <div class="grid grid-cols-2 gap-4 text-sm mb-3">
                        <div>
                            <p class="text-green-600">结算周期</p>
                            <p class="font-medium">T+1</p>
                        </div>
                        <div>
                            <p class="text-green-600">结算银行</p>
                            <p class="font-medium">工行****8866</p>
                        </div>
                    </div>
                    <button onclick="editSettlementSettings()" class="w-full bg-green-600 text-white text-sm py-2 rounded-lg hover:bg-green-700 transition-colors">
                        编辑结算设置
                    </button>
                </div>
            </div>
        </div>

        <!-- Bottom Action Bar -->
        <div class="absolute bottom-1 left-0 right-0 bg-white border-t border-gray-200 px-4 py-3 shadow-lg">
            <div class="flex space-x-3">
                <button onclick="viewPaymentReport()" class="flex-1 bg-green-600 text-white font-medium py-2.5 rounded-lg hover:bg-green-700 transition-colors">
                    <i class="fas fa-chart-pie mr-2"></i>支付报告
                </button>
                <button onclick="testPayment()" class="bg-gray-100 text-gray-700 font-medium px-4 py-2.5 rounded-lg hover:bg-gray-200 transition-colors">
                    <i class="fas fa-vial"></i>
                </button>
            </div>
        </div>
    </div>

    <script>
        // Configure payment methods
        function configurePayment(method) {
            window.location.href = `b2b-configure-payment.html?method=${method}`;
        }

        // View fee details
        function viewFeeDetails() {
            window.location.href = 'b2b-fee-details.html';
        }

        // Edit limits
        function editSingleLimit() {
            const newLimit = prompt('请输入单笔限额（元）:', '50000');
            if (newLimit && !isNaN(newLimit)) {
                showToast(`单笔限额已调整为¥${parseInt(newLimit).toLocaleString()}`);
            }
        }

        function editDailyLimit() {
            const newLimit = prompt('请输入日累计限额（元）:', '200000');
            if (newLimit && !isNaN(newLimit)) {
                showToast(`日累计限额已调整为¥${parseInt(newLimit).toLocaleString()}`);
            }
        }

        // Edit settlement settings
        function editSettlementSettings() {
            window.location.href = 'b2b-settlement-settings.html';
        }

        // View payment report
        function viewPaymentReport() {
            window.location.href = 'b2b-payment-report.html';
        }

        // Test payment
        function testPayment() {
            showToast('正在启动支付测试...');
            setTimeout(() => {
                alert('支付测试\n\n• 支付宝: ✓ 连接正常\n• 微信支付: ✓ 连接正常\n• 银行转账: ✓ 连接正常\n\n所有支付渠道运行正常');
            }, 2000);
        }

        // Toast notification
        function showToast(message) {
            const toast = document.createElement('div');
            toast.className = 'fixed top-20 left-1/2 transform -translate-x-1/2 bg-gray-800 text-white px-4 py-2 rounded-lg text-sm z-50';
            toast.textContent = message;
            document.body.appendChild(toast);
            
            setTimeout(() => {
                toast.remove();
            }, 2000);
        }

        // Initialize page
        document.addEventListener('DOMContentLoaded', function() {
            showToast('支付设置已加载');
        });
    </script>
</body>
</html>